import React, { useEffect, useState } from 'react';
import { Tabs, Row, Col, Button, Checkbox, Image, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import './index.scss';
import AccountLogin from '../../components/Order/LoginCom/AccountLogin';
import PhoneLogin from '../../components/Order/LoginCom/PhoneLogin';

export default function LoginView() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  const [accountForm, setAccountForm] = useState({
    username: userInfo ? userInfo.username : '',
    password: userInfo ? userInfo.password : '',
  });
  // const [phoneForm, setPhoneForm] = useState({});
  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();
  const [isReme, setIsReme] = useState(userInfo ? userInfo.isReme : false);
  let timer = null;
  const getAccountForm = val => {
    // console.log('账号登录');
    setAccountForm(val);
  };
  const getPhoneForm = formData => {
    // console.log('手机号登录');
  };
  const login = () => {
    // console.log(accountForm);
    const { username, password } = accountForm;
    if (!username) {
      messageApi.open({
        type: 'error',
        content: '账号不能为空',
        duration: 1,
      });
      return;
    }
    if (!password) {
      messageApi.open({
        type: 'error',
        content: '密码不能为空',
        duration: 1,
      });
      return;
    }
    if (username === '张三' && password === '123qwe') {
      // if (isReme === true) {
      //   localStorage.setItem('token', 'token111'); //7天期限的token
      //   localStorage.setItem('userInfo', { username, password });
      // }
      localStorage.setItem('token', 'token111');
      localStorage.setItem(
        'userInfo',
        JSON.stringify({ isReme, username, password })
      );
      messageApi.open({
        type: 'success',
        content: '登录成功',
        duration: 1,
      });
      timer = setTimeout(() => {
        navigate('/home', { state: { username } });
      }, 1000);
    } else {
      messageApi.open({
        type: 'error',
        content: '账号或密码不正确',
        duration: 2,
      });
      return;
    }
  };
  const rememberMe = e => {
    setIsReme(e.target.checked);
  };
  // 清楚定时器，要添加 timer 为依赖
  useEffect(() => {
    return () => {
      clearTimeout(timer);
    };
  }, [timer]);
  return (
    <div className='login-root'>
      {contextHolder}
      <Row style={{ height: '100%' }} align='middle'>
        <Col span={7} offset={9}>
          <Row justify='center'>
            <Image
              width={35}
              src='https://cdn3.axureshop.com/demo/2112109/images/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C/u12368.svg'
            />
            <h2>汇流成泽电商管理后台</h2>
          </Row>
          <Tabs
            defaultActiveKey='1'
            onChange={() => {}}
            items={[
              {
                label: `账号密码登录`,
                key: '1',
                children: (
                  <AccountLogin
                    getAccountForm={getAccountForm}
                    userInfo={isReme ? accountForm : ''}
                  />
                ),
              },
              {
                label: `手机号登录`,
                key: '2',
                children: <PhoneLogin getPhoneForm={getPhoneForm} />,
              },
            ]}
          />
          <div className='forget-box'>
            {/* <Checkbox onChange={rememberMe}>7天内自动登录</Checkbox> */}
            <Checkbox
              onChange={rememberMe}
              defaultChecked={isReme ? isReme : false}>
              记住我
            </Checkbox>
            <Button type='link button'>忘记密码</Button>
          </div>
          <Button
            type='primary button'
            className='login-btn'
            size='large'
            onClick={login}>
            登录
          </Button>
        </Col>
      </Row>
    </div>
  );
}
